<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">

<head>
    <th:block th:include="common/common_head :: commonHeader('编辑员工')"/>
    <link th:href="@{/css/plugins/datapicker/datepicker3.css}" rel="stylesheet">
</head>

<body class="gray-bg">

<div class="wrapper wrapper-content animated fadeInRight">
    <form class="form-horizontal" method="post" id="userForm">
        <div class="row">
            <div class="form-group">
                <div class="col-sm-8" style="margin-left: 16px">
                    <input class="btn btn-primary" type="button" onclick="save()" value="保存">
                    <button class="btn btn-primary" type="button" onclick="Dialog.closeFrame(window.name)">取 消</button>
                </div>
            </div>

            <div class="col-sm-6">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>基础信息</h5>
                    </div>
                    <div class="ibox-content">
                        <input type="hidden" name="userId" th:value="${user.userId}">
                        <div class="form-group">
                            <label class="col-sm-3 control-label"><span class="required-sign">*</span>姓名：</label>
                            <div class="col-sm-6">
                                <input name="name" th:value="${user.name}" type="text" placeholder="姓名" class="form-control">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">手机号：</label>
                            <div class="col-sm-6">
                                <input name="mobile" th:value="${user.mobile}" type="text" placeholder="手机号" class="form-control">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">邮箱：</label>
                            <div class="col-sm-6">
                                <input name="email" th:value="${user.email}" type="text" placeholder="邮箱" class="form-control">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">QQ号：</label>
                            <div class="col-sm-6">
                                <input name="qqNumber" th:value="${user.qqNumber}" type="text" placeholder="QQ号" class="form-control">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">详细地址：</label>
                            <div class="col-sm-6">
                                <input name="address" th:value="${user.address}" type="text" placeholder="详细地址" class="form-control">
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-sm-6">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>账号信息</h5>
                    </div>

                    <div class="ibox-content">
                        <div class="form-group">
                            <label class="col-sm-3 control-label">头像：</label>
                            <div class="col-sm-6">
                                <div class="img-preview img-preview-sm image-preview-out">
                                    <input id="avatar" name="avatar" th:value="${user.avatar}" type="hidden"
                                           class="form-control">
                                    <img id="avatarImg" class="image-preview"
                                         th:src="@{${user.avatar != '' and user.avatar != null ? '/sys/user/getPic/'+ user.avatar : '/static/img/add-pic.png'}}"
                                         onclick="openImgSelector()">
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label"><span class="required-sign">*</span>账号：</label>
                            <div class="col-sm-6">
                                <input name="username" readonly th:value="${user.username}" type="text" placeholder="登录账号"
                                       class="form-control">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label"><span class="required-sign">*</span>所属机构：</label>
                            <div class="col-sm-6">
                                <input type="hidden" name="deptId" th:value="${user.deptId}" value="0" id="deptId" class="form-control"/>
                                <input onclick="addPid()" readonly="readonly" value="请选择" th:value="${user.deptName}" type="text" name="deptName"
                                       id="deptName" placeholder="所属机构" class="form-control"/>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label"><span class="required-sign">*</span>角色：</label>
                            <div class="col-sm-6">
                                <input type="hidden" id="roleIds" name="roleIdList" th:value="${user.roleIdList}">
                                <select data-placeholder="选择角色" id="roleId" class="chosen-select"
                                        multiple style="width: 100%" tabindex="4"  onchange="isNeedOA()">
                                </select>
                            </div>
                        </div>
                        <div class="form-group" id="oaAccountInput" style="display: none">
                            <label class="col-sm-3 control-label"><span class="required-sign">*</span>OA账号：</label>
                            <div class="col-sm-6">
                                <input id="oaAccount" name="oaAccount" type="text" placeholder="OA账号" th:value="${user.oaAccount}"
                                       class="form-control" autocomplete="off">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>

<!--引入公共js-->
<div th:include="common/onload_js :: onloadJS"></div>
<!-- Chosen -->
<script th:src="@{/static/js/plugins/chosen/chosen.jquery.js}"></script>

<script type="text/javascript">
    $(function () {
        var post = $("#post").val();
        if (post != null && post != "") {
            var postArr = post.split(",");
            for (var i=0;i<postArr.length;i++){
                $("input[type='checkbox'][name='postCheckbox'][value='"+ postArr[i] +"']").prop("checked", "checked");
            }
        }

        //初始化icheck插件
        $('.i-checks').iCheck({
            checkboxClass: 'icheckbox_square-green',
            radioClass: 'iradio_square-green'
        });

        //获取角色列表
        Page.ajaxPOST(ctxPath+"/sys/role/select", null, function (res) {
            var list = res.list;
            var roleIdList = $("#roleIds").val();
            if (!Common.isEmpty(roleIdList)) {
                roleIdList = roleIdList.replace("[", "").replace("]", "").split(",");
            }
            var roleHtml = '';
            if (list != '' && list.length > 0) {
                for(var i=0;i<list.length; i++) {
                    var item = list[i];
                    var isExist = false;
                    if (roleIdList != '' && roleIdList.length>0) {
                        for (var j=0;j<roleIdList.length;j++) {
                            if (item.roleId == roleIdList[j]) {
                                isExist = true;
                                break;
                            }
                        }
                    }
                    if (isExist) {
                        roleHtml += '<option value="'+item.roleId +'" hassubinfo="true" selected="selected">'+ item.roleName +'</option>'
                    } else{
                        roleHtml += '<option value="'+item.roleId +'" hassubinfo="true">'+ item.roleName +'</option>'
                    }
                }
            }
            $("#roleId").append(roleHtml);
            $("#roleId").chosen();
        })

        Page.validateForm("#userForm",{
            tips:"确定保存？",
            rules: {
                name: {
                    required: true
                }
                ,username: {
                    required: true
                }
                ,mobile: {
                    required: true
                    // ,regexp:/^1[34578]\d{9}$/
                    // ,remote: ctxPath+"/sys/user/checkUserMobile"
                }
                ,email : {
                    regexp: /^(\w)+(\.\w+)*@(\w)+((\.\w+)+)$/
                }
            },
            messages: {
                name: {
                    required: "姓名不能为空"
                }
                ,username: {
                    required: "请输入账号"
                    ,remote: "账号重复，请重新输入"
                }
                ,mobile: {
                    required: "请输入手机号"
                    // ,regexp: "请输入正确的手机号码"
                    // , remote: "手机号重复，请重新输入"
                }
                ,email : {
                    regexp: "请输入正确的邮箱地址"
                }
            }
        });
        //如果OA账号不空则显示
        if($("#oaAccount").val()){
            $("#oaAccountInput").css("display","block");
        }
    })

    function save() {
        if($("#userForm").valid()) {
            var roleIdList = new Array();
            var roleIds = $("#roleId").val();
            if ($("#deptId").val() == '' || $("#deptId").val() == undefined) {
                Dialog.errorMsg("请选择机构信息");
                return;
            }
            if (roleIds == '' || roleIds == undefined) {
                Dialog.errorMsg("请选择角色信息");
                return;
            }
            var selected=$("#roleId option:selected").text();
            if((selected.indexOf("采购专员")>=0||selected.indexOf("采购组长")>=0||selected.indexOf("质检专员")>=0)&& !$("#oaAccount").val()){
                Dialog.errorMsg("请填写OA账号！");
                return;
            }
            roleIdList = Array.from(roleIds);
            $("#roleIds").val(roleIdList);

            Page.ajaxPOST(ctxPath + "/sys/user/update", $("#userForm").serialize(), function (res) {
                Dialog.msg("编辑成功!",function(){
                    Dialog.closeFrame(window.name)
                });
            });
        }
    }

    //弹出组织机构列表
    function addPid() {
        Dialog.openUrl("组织机构列表", ctxPath+"/modules/sys/dept/dept_pop_tree.html", {area: ['300px', '400px'],shadeClose:
            true});
    }

    function toDeptId(treeNode) {
        $("#deptId").val(treeNode.deptId);
        $("#deptName").val(treeNode.name);
    }

    function openImgSelector() {
        var index = Dialog.openUrl("图片选择", ctxPath+"/sys/user/openImagePop?picId="+$("#avatar").val(),
            {area: ['800px', '450px'],shadeClose:
                true});
    }

    function setImageUrl(dataUrl) {
        Page.ajaxPOST(ctxPath+"/sys/user/uploadAvatar", {"base64Data": dataUrl}, function (res) {
            $("#avatarImg").attr("src", ctxPath+'/sys/user/getPic/'+res.result);
            $("#avatar").val(res.result);
        })
    }

    //检查角色是否包含采购专员，是则显示OA账号输入框必填
    function isNeedOA() {
        var roleNames =$("#roleId option:selected").text();
        if(roleNames&&roleNames.indexOf("采购专员")>=0||roleNames&&roleNames.indexOf("采购组长")>=0||roleNames&&roleNames.indexOf("质检专员")>=0){
            $("#oaAccountInput").css("display","block");
        }else {
            $("#oaAccount").val("");
            $("#oaAccountInput").css("display","none");
        }
    }
</script>

</body>
</html>
